<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/cart.css">
	</head>

	<body>
		<header>
			<span class="title">购物车</span>
		</header>
		<ul class="cart-list">


		</ul>
		<div class="guess">
			<div class="title">猜你喜欢</div>
			<ul class="guess_list">
				<li>
					<a href="#">
						<img src="./img/cart/likegase.jpg" alt="">
						<div class="name">色织水洗棉格纹四件套</div>
						<div class="price">￥219</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/cart/likegase.jpg" alt="">
						<div class="name">色织水洗棉格纹四件套</div>
						<div class="price">￥219</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/cart/likegase.jpg" alt="">
						<div class="name">色织水洗棉格纹四件套</div>
						<div class="price">￥219</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/cart/likegase.jpg" alt="">
						<div class="name">色织水洗棉格纹四件套</div>
						<div class="price">￥219</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/cart/likegase.jpg" alt="">
						<div class="name">色织水洗棉格纹四件套</div>
						<div class="price">￥219</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/cart/likegase.jpg" alt="">
						<div class="name">色织水洗棉格纹四件套</div>
						<div class="price">￥219</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/cart/likegase.jpg" alt="">
						<div class="name">色织水洗棉格纹四件套</div>
						<div class="price">￥219</div>
					</a>
				</li>
			</ul>
		</div>
		<nav>
			<div class="total">
				<div>
					<span class="select-box"><input type="checkbox">
					</span>
					<span class="all_select">全选</span>
				</div>
				<div>
					<span class="price">￥0</span>
					<span class="buy_button"><a href="#" class="make">下单</a></span>
				</div>

			</div>

			<ul class="nav">
				<li>
					<a href="./index.html">
						<img src="./img/cart/nav1.png" alt="">
						<div class="name">首页</div>
					</a>
				</li>
				<li>
					<a href="./preferred.html">
						<img src="./img/cart/nav2.png" alt="">
						<div class="name">优选</div>
					</a>
				</li>
				<li>
					<a href="./category.html">
						<img src="./img/cart/nav3.png" alt="">
						<div class="name">分类</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/cart/nav4.png" alt="">
						<div class="name">购物车</div>
					</a>
				</li>
				<li>
					<a href="user.html">
						<img src="./img/cart/nav5.png" alt="">
						<div class="name">我的</div>
					</a>
				</li>
			</ul>
		</nav>
		<div class="to_top">
			<a href="#">
				<img src="./img/cart/top.png" alt="">
			</a>
		</div>

		<script src="./js/axios.min.js"></script>
		<script src="./js/axios.config.js"></script>
		<script src="./js/utils.js"></script>

		<script>
			var temp;
			var oCart = document.querySelector('.cart-list');
			axios.get('/cart/list', {
					pagesize: 10
				})
				.then(function(res) {
					res.data.forEach(function(item) {
						var lis = `<li class="relative" >
			<div class="select-box"><input type="checkbox" data-id=${item.goods_id} ></div>

			<a href="#"><img class="photo" src="${item.img}" alt=""></a>
			<div class="info">
				<div class="top">
					<div class="name">${item.name}</div>
					<div class="style">雾霾蓝</div>
				</div>
				<div class="bottom">
					<span class="price">￥${item.price}</span>
					<div class="num" data-id=${item.id}>
						<span class="left">-</span>
						<form action=""><input type="text" value="${item.goods_num}"></form>
						<span class="right">+</span>
					</div>
				</div>
			</div>
			<img class="remove" src="./img/cart/remove.png" alt="">
		</li>

`;
						oCart.insertAdjacentHTML('beforeend', lis);

						// console.log(temp);





					});


					var oCheckboxList = document.querySelectorAll(".relative .select-box input");
					var oCheckAll = document.querySelector(".total .select-box input");
					var oLis = document.querySelectorAll(".relative");

					var oTotal = document.querySelector(".total .price");
					var oRem = document.querySelectorAll('.relative .remove');
					var oNum = document.querySelectorAll(".num");
					var temp;
					//数量的增减
					oNum.forEach(function(item) {
						item.onclick = function(e) {

							var oGet = item.querySelector('input');
							var left = e.target.matches('.left');
							var right = e.target.matches('.right');
							temp = item.dataset.id

							if (left && oGet.value > 0) {
								oGet.value--;
								axios.post('/cart/decrease', {
									id: temp,
									num: 1
								}).then(function(res) {


								});
							}
							if (right) {
								oGet.value++;
								axios.post('/cart/increase', {
									id: temp,
									num: 1
								}).then(function(res) {


								});
							}
							sumPrice();
						}
					});

					//点击删除，把数量置为零，并删除li
					oCart.onclick = function(event) {
						var isValid = event.target.matches('.remove');
						var oNum = this.querySelector('.num');
						var temp1 = oNum.dataset.id;
						if (isValid) {

							var val = event.target.querySelector('.num input[type="text"]');
							// console.log(val);
							// val.value = 0;

							event.target.parentElement.remove();
							oLis = document.querySelectorAll(".relative");
							sumPrice();
							axios.post('/cart/remove', {
									id: temp1
								})
								.then(function() {

								})
							}
				}




					//点击删除，把数量置为零，并删除li
					// oCart.forEach(function (item) {
					// 	item.addEventListener('click', function (e) {
					// 		if (e.target.matches('.remove')) {
					// 			item.querySelector('.num input').value = 0;
					// 			item.remove();

					// 		}
					// 		axios.post('/cart/remove', { id: temp })
					// 			.then(function () {

					// 			})

					// 	});


					// });
					//点击全选，进行全选按钮
					oCheckAll.addEventListener('change', function() {
						var current = this.checked;
						oCheckboxList.forEach(function(item) {
							item.checked = current;
						})
						sumPrice();

					});

					//点击复选框 ，价格随之修改
					oCheckboxList.forEach(function(item) {

						item.addEventListener('change', function() {
							sumPrice();
							var cAll = document.querySelectorAll(
								".relative .select-box input[type='checkbox']:checked").length;
							oCheckAll.checked = (oCheckboxList.length === cAll);

						});
					});
					var total_aff;

					//sumPrice() 价格计算函数
					function sumPrice() {
						var totalPrice = 0;
						oLis.forEach(function(item) {
							var oPrice = item.querySelector(".price");
							var oCheckbox = item.querySelector(".select-box input");
							var oNum_inp = item.querySelector('.num input');
							var page = oPrice.innerHTML.slice(1);
							var price = page * oNum_inp.value;
							if (oCheckbox.checked) {
								totalPrice += price;
								total_aff = totalPrice;

							};
						});
						oTotal.innerHTML = '￥' + totalPrice;
					}
					var oMake = document.querySelector('.make');
					var arr = [];


					oMake.onclick = function() {
						var modo;
						oCheckboxList.forEach(function(item) {
							var item_id = item.dataset.id;
							if (item.checked) {
								arr.push(item_id);
								modo = true;
							}
						});



						if (modo === true) {
							location.assign(`./affirm.html?gid=${arr}&seita=${total_aff}`);
						} else {
							alert('您还没有选择商品');
						}
					}


				});
		</script>
	</body>

</html>
